<style lang="scss">
.dym-form {
  .el-form:not(.el-form--label-top) {
    .el-form-item {
      display: flex;
      align-items: center;
    }
    .el-form-item__content {
      //display: flex;
      flex-wrap: wrap;
      align-items: center;
      flex: 1;
      margin-left: 0 !important;
    }
  }
  .el-form--label-left .el-form-item__label {
    text-align: right;
  }
}
</style>

<template>
  <div class="dym-form">
    <template v-if="state.comReady">
      <component :is="comName"></component>
    </template>
  </div>
</template>

<script>
import {configToFormComponent} from "./render.js";
// import {getCachedVue} from "./glo";
import {getZFormMeta} from "./glo";

const COM_PREFIX = 'dym-form__';

export default {
  name: "DymForm",
  props: {
    title: String,
    config: Object,
    metas: {
      type: Object,
      default() {
        return {}
      },
    },
    partName: String,
    varName: {
      type: String,
      default: 'Z_FORM_TPL'
    },
    debug: Boolean,
  },
  setup(props, outerCtx) {
    const {
      reactive,
      getCurrentInstance,
      inject,
      onBeforeUnmount
    } = globalThis.vueCompositionAPI;
    let instanse = getCurrentInstance();
    let meta = getZFormMeta(instanse);
    // let ZY_EXT = globalThis.ZY_EXT;
    // let JSON5 = globalThis.ZY.JSON5;
    // console.log(outerCtx)
    let comName = COM_PREFIX + ZY.lodash.kebabCase(ZY.rid());

    let ZFormTemplateIns = inject('ZFormTemplateIns')


    let DymFormUUID = ZY.rid()

    // console.log("Props", props, ctx);
    /**
     * Reactive Data, Computed
     */
    const state = reactive({
      comReady: false
    });

    function listener(name, v, originEvent) {
      // console.log('listenEvent', name, v, outerCtx)
        outerCtx.emit('fire', [name, v, originEvent])
    }


    async function init(config) {
      // console.log(formDef)
      // let html = document.getElementById(props.varName)?.innerHTML ?? '';
      // console.log('init', props.partName)
      let html = globalThis[props.varName]
      if (props.debug) {
        config.debug = true
      }
      let com = configToFormComponent(comName,
          config,
          html,
          {
            outerCtx,
            partName: props.partName,
            outerProps: props,
            listener,
            props: ZFormTemplateIns.getProps(),
            topSlots: ZFormTemplateIns.getSlots()
          }
      )
      meta.CustomDymComponent.register(com);
      console.log('local CustomDymComponent com', com, meta)
      window.CustomCusComponent.register(com);
      globalThis.__zFormCachedVue__
      // getCachedVue()
          .nextTick(() => {
        state.comReady = true
      })
    }

    init(props.config);

    function destory() {
      state.comReady = false
    }

    function handleWrapChange(key, value) {
      // console.log(key, value)
    }


    ZFormTemplateIns.register(DymFormUUID, handleWrapChange)

    onBeforeUnmount(() => {
      window.CustomCusComponent.unRegister(comName);
      meta.CustomDymComponent.unRegister(comName);
      ZFormTemplateIns.unRegister(DymFormUUID)
    })

    return {
      // States
      comName,
      destory,
      state,
      // Methods
    };
  }
};

</script>

<style>
</style>
